<template>
	<view>
		<view class="top">
			<view class="top-info">
				<text class="name"><u-icon name="phone"></u-icon>{{nickName}}</text>
				<br>
				<u--text color="white" mode="phone" prefixIcon="phone"
					iconStyle="color:white;font-size:26rpx;margin-right:11rpx " :text="userPhone" format="encrypt"
					margin="12rpx 0 0 27rpx" size="13"></u--text>
				<br>
				<u--text color="white" prefixIcon="email" iconStyle="color:white;font-size:26rpx;margin-right:11rpx "
					:text="userEmail" margin="12rpx 0 0 27rpx" size="13"></u--text>
				<br>
			</view>
			<view class="top-avatar">
				<u--image :showLoading="true" :src="src" height="120rpx" width="120rpx" @click="click" shape="circle">
				</u--image>
			</view>
		</view>

		<view class="container" v-if="!showApplytips && !showConditions">

			<!-- 左侧申请按钮 -->

			<button class="apply-btn" @click="showApplytips = true" v-if="showApply === 1">
				<text>申请分销</text>
			</button>
			
			<button class="apply-btn" v-if="showApply === 2">
				<text>审核中</text>
			</button>
			
			<button class="apply-btn" v-if="showApply === 3">
				<text>审核通过</text>
			</button>
			
			<button class="apply-btn" @click="showApplytips = true" v-if="showApply === 4">
				<text>审核未通过</text>
			</button>


			<!-- 右侧佣金比例 -->
			<view class="commission">
				<text class="commission-text">佣金比例</text><br>
				<text class="percent">15%</text>
			</view>

			<!-- <view class="condition-link-wrap">
				<text class="condition-link" @click="showConditions = true">查看申请条件</text>
			</view> -->

			<!-- 分销流程区域 -->
			<view class="section">
				<text class="section-title">分销流程</text>
				<view class="process-box">
					<text>校区在小程序后台设置需要分销的商品</text>
					<text>明确商品名称、描述、价格、库存、图片、购买须知等</text>
					<text>对虚拟商品（如课程），需明确有效期、使用规则、退款政策,实物商品需确认物流配送方案</text>
				</view>
			</view>

		</view>
		<view class="terms-container" v-if="showApplytips">
			<view class="terms-header">
				<u-icon name="arrow-left" size="28" @click="showApplytips = false"></u-icon>
				<text class="terms-title">分销申请条款</text>
			</view>
		
			<scroll-view class="terms-content" scroll-y>
				<view class="terms-text">
									<text class="terms-title">校区课程及商品分销协议</text>
						
									<text class="terms-section">第一条 总则</text>
									<text>1.1 本协议是平台与校区之间关于课程及商品分销的合作协议。</text>
									<text>1.2 校区通过推广校区课程和商品获取相应佣金。</text>
									<text>1.3 本协议同时受小程序平台相关规则约束。</text>
						
									<text class="terms-section">第二条 分销资格</text>
									<text>2.1 申请人需年满18周岁，具有完全民事行为能力。</text>
									<text>2.2 申请人需提供真实有效的身份信息。</text>
									<text>2.3 申请人需同意本协议所有条款。</text>
									<text>2.4 申请人需在小程序平台完成实名认证。</text>
						
									<text class="terms-section">第三条 分销规则</text>
									<text>3.1 分销员可通过个人专属链接或邀请码推广校区课程和商品。</text>
									<text>3.2 用户通过分销员渠道购买课程或商品后，分销员可获得15%的销售佣金。</text>
									<text>3.3 佣金按月结算，每月15日发放上月佣金至小程序钱包。</text>
									<text>3.4 课程退款时，相应佣金将扣除。</text>
									<text>3.5 佣金提现需在小程序平台完成相关设置。</text>
						
									<text class="terms-section">第四条 禁止行为</text>
									<text>4.1 不得虚假宣传课程效果或商品质量。</text>
									<text>4.2 不得以任何形式诋毁校区或其他分销员。</text>
									<text>4.3 不得使用不正当手段获取佣金。</text>
									<text>4.4 不得违反小程序平台相关规定。</text>
						
									<text class="terms-section">第五条 协议终止</text>
									<text>5.1 违反本协议条款，校区有权终止合作。</text>
									<text>5.2 分销员可随时申请终止合作。</text>
									<text>5.3 协议终止后，未结算佣金仍按正常流程发放。</text>
						
									<text class="terms-section">第六条 小程序平台责任</text>
									<text>6.1 小程序平台提供分销技术支持。</text>
									<text>6.2 平台负责佣金结算系统的正常运行。</text>
									<text>6.3 平台有权根据政策调整分销规则。</text>
						
									<text class="terms-section">第七条 其他</text>
									<text>7.1 本协议最终解释权归校区所有。</text>
									<text>7.2 协议变更将通过小程序平台通知。</text>
								</view>
				<view class="agree-row">
					<u-checkbox-group v-model="agreedList" @change="checkboxChange">
					          <u-checkbox 
					            shape="square"
					            activeColor="#4B71FF"
					            size="40rpx"
					            name="agree"
					          ></u-checkbox>
					        </u-checkbox-group>
					<view class="agree-text">我已悉知条款内容</view>
				</view>
			</scroll-view>
			
		
			<view class="terms-footer">
				<button class="confirm-btn" @click="confirmTerms">我已阅读并同意申请</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		selectInfoU,
		schoolDistributionApp,
		selectSchoolStatus
	} from '@/api/distribution.js'
	export default {
		data() {
			return {
				src: "",
				nickName: "",
				userPhone: "",
				userEmail: "",
				userId: "",
				userName: "",
				campusId: "",
				applicantId: "",
				userId: 0,
				showApplytips: false,
				showConditions: false,
				showApply: false,
				isSubmitting: false,
				agreedList: [], 
			};
		},
		 computed: {
		    // 计算是否同意
		    agreed() {
		      return this.agreedList.includes('agree');
		    }
		  },

		mounted() {	
			this.getId();
		},
		methods: {
			

			getId() {
				
				uni.getStorage({
				  key: 'campusId',
				  success: (res) => {  
				    this.campusId = res.data; 
				  }
				});

			      uni.getStorage({
			        key: 'userId',
			        success: (res) => {  
			          this.userId = res.data; 
					  this.fetchUserInfo();
			        }
			      });
			},
			fetchUserInfo() {
				const params = {
					applicantId: this.userId,
					userId: this.userId
				};
				selectSchoolStatus(params).then(res => {
					console.log(res.data.exit,3213213213)
						if (res.code === 200) {
							console.log(res.data)
							if(res.data.exit == null){
								this.showApply = 1;
							}else if(res.data.exit.isDistribute == 0){
								this.showApply = 2;
							} else if(res.data.exit.isDistribute == 1){
								this.showApply = 3;
							}else if(res.data.exit.isDistribute == 2){
								this.showApply = 4;
							}
						}
					}).catch(error => {
						console.error("获取信息失败:", error);
					});

					selectInfoU(params).then(res => {
						if (res.code === 200) {
							this.nickName = res.data.info.nickName;
							this.userPhone = res.data.info.phonenumber;
							this.userEmail = res.data.info.email;
							this.src = res.data.info.avatar; 
							this.userId = res.data.info.userId,
							this.userName = res.data.info.userName
						}
					}).catch(error => {
						console.error("获取信息失败:", error);
					});
				



			},
			checkboxChange(e) {
			      this.agreedList = e;
			    },
			confirmTerms() {
							if (!this.agreed) {
								uni.showToast({
									title: '请先阅读并同意条款',
									icon: 'none'
								});
								return;
							}
							if (this.isSubmitting) return;
							this.isSubmitting = true;
							this.submitApply();
						},
			submitApply() {	
				this.showApplytips = false;
				const params = {
					applicantId: this.userId, 
					applicantName: this.userName,
					campusId: this.campusId,
					demo1: this.userPhone,
				};
				schoolDistributionApp(params).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '申请提交成功',
							icon: 'success'
						});
						this.fetchUserInfo();
						this.showApplytips = false;
					}
				}).catch(error => {
					console.error("获取信息失败:", error);
				});
			},
		}
	}
</script>

<style lang="scss">
	.top {
		width: 100%;
		height: 270rpx;
		background: #0F40F5;
		border: 1rpx solid #0d05f6;
		padding-top: 15rpx;

		.top-info {
			color: white;
			padding: 50rpx 65rpx 10rpx;
			float: left;
			font-weight: 550;
			font-size: 45rpx;
		}

		.top-avatar {
			margin-top: 56rpx;
			margin-right: 85rpx;
			float: right;
		}
	}

	.container {

		border-radius: 20rpx 20rpx 15rpx 15rpx;
		/* 上边圆角更大，下部略小更美观 */
		background-color: #ffffff;
		padding: 35rpx 35rpx;
		margin: -25rpx auto 0;

	}

	.apply-btn {
		width: 280rpx;
		height: 80rpx;
		background-color: #4B71FF;
		border-radius: 5rpx;
		float: left;
		margin-left: 35rpx;
		margin-top: 40rpx;
	}

	.apply-btn text {
		color: white;
		font-size: 25rpx;
		font-weight: bold;
		float: left;
		margin-left: 65rpx;
		margin-top: 7rpx;
	}

	.commission {
		text-align: right;
	}

	.commission-text {
		color: #ff9900;
		font-size: 45rpx;
		font-weight: bold;
		margin-top: 40rpx;
		margin-right: 70rpx;
		display: inline-block;
	}

	.percent {
		color: red;
		font-size: 45rpx;
		margin-top: 5rpx;
		margin-right: 100rpx;
		display: inline-block;
	}

	.condition-link-wrap {
		margin: -10rpx 0 20rpx 100rpx;
		width: 160rpx;
	}

	.condition-link {
		color: #2979ff;
		font-size: 26rpx;
		text-decoration: underline;
	}

	/* 通用模块样式 */
	.section {
		margin-top: 45rpx;
	}

	.section-title {
		color: #BD3124;
		font-size: 35rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
		font-style: italic;
	}

	/* 流程框 */
	.process-box {
		background-color: #f8f9fa;
		border-radius: 4rpx;
		padding: 40rpx;
		margin-top: 24rpx;
		line-height: 1.8;

		text {
			display: block;
			font-size: 28rpx;
			color: #333;
		}
	}

	.swiper-container {
		margin-top: 20rpx;
		height: 300rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
		display: block;
	}


	.form-header {
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;

		.section-title {
			margin-bottom: 0;
			margin-left: 20rpx;
		}
	}

	/* 表单内容样式 */
	.form-content {
		padding: 0 20rpx;

		.form-row {
			display: flex;
			align-items: center;
			padding: 25rpx 0;

			.form-label {
				width: 180rpx;
				font-size: 30rpx;
				color: #333;
				margin-left: 40rpx;
			}

			.form-value {
				font-size: 30rpx;
				color: #333;
			}
		}

		.terms-row {
			margin-top: 20rpx;
			margin-left: 40rpx;

			.terms-link {
				color: #2979ff;
				font-size: 28rpx;
				text-decoration: underline;
			}
		}

		.agree-row {
			display: flex;
			  align-items: center;
			.agree-text {
				margin-left: 10rpx;
			}
		}

		.submit-btn {
			background-color: #4B71FF;
			color: white;
			width: 400rpx;
			border-radius: 30rpx;
			height: 80rpx;
			font-size: 32rpx;
			margin-top: 30rpx;
		}
	}

	.terms-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		z-index: 999;
		display: flex;
		flex-direction: column;
	}

	.terms-header {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.terms-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-left: 20rpx;
		color: #333;
	}

	.terms-content {
		flex: 1;
		padding: 30rpx;
		overflow-y: auto;
	}

	.terms-text {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		font-size: 30rpx;
		line-height: 1.6;
		color: #333;

		.terms-title {
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 20rpx;
			margin-right: 100rpx;
		}

		.terms-section {
			font-weight: bold;
			margin-top: 30rpx;
			color: #000;
		}
	}

	.terms-footer {
		padding: 30rpx;
	}

	.confirm-btn {
		background-color: #4B71FF;
		color: white;
		width: 100%;
		border-radius: 50rpx;
		height: 90rpx;
		font-size: 32rpx;
	}
</style>